<template>
	<view>
		<u-navbar title="创建随访" :autoBack="true" placeholder>
		</u-navbar>
		<view class="px-8 pt-8">
			<view class="bg-fff px-16 br-8">
				<view class="flex-align py-16 form-item" @click="openDatePicker">
					<view class="fw-500 fs-14 lh-2 color-5F6865 flex-1">提醒时间</view>
					<view class="fw-400 fs-14 lh-2 pe-4" :class="formData.time ? 'color-333' : 'color-999'">
						{{ formData.time || '请选择年月日时分秒' }}
					</view>
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
				<view class="flex-align py-16 form-item">
					<view class="fw-500 fs-14 lh-2 color-5F6865 ">事项</view>
					<input v-model="formData.item" class="flex-1" type="text" placeholder="请输入内容" placeholder-class="input-css" />
				</view>
				<view class="fw-500 fs-14 lh-2 color-5F6865 mt-16">服务内容</view>
				<view class="py-16">
					<u--textarea v-model="formData.content" border="none" maxlength="300" autoHeight
						placeholder="请在此处输入备注信息或特殊需求" count></u--textarea>
				</view>
			</view>


		</view>
		<view style="height: 200rpx;"></view>
		<view class="footer bg-fff px-10 pt-8 flex-align"
			:style="{paddingBottom:`${$f.sys().safeAreaBottom ? $f.sys().safeAreaBottom : 10}px`}">
			<u-button text="提交" @click="$u.debounce(submitFollowUp,500,true)"
				customStyle="background-color: #24C98F;color:#fff;border:none;"></u-button>
		</view>
    <u-datetime-picker :show="showPicker" v-model="dateTimeValue" mode="datetime" title="选择日期时间"
                       @cancel="closeDatePicker" @confirm="dateConfirm"></u-datetime-picker>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				formData: {
					item: '',
					time: '',
					content: ''
				},
				showPicker: false,
				dateTimeValue: Date.now()
			}
		},

		methods: {
			openDatePicker() {
				this.showPicker = true;
			},

			closeDatePicker() {
				this.showPicker = false;
			},

			dateConfirm(e) {
				console.log(e)
				this.dateTimeValue = e.value;
				// 格式化显示时间
				const date = new Date(e.value);
				this.formData.time = this.formatDateTime(date);
				this.showPicker = false;
			},


			formatDateTime(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},

			// 表单验证
			validateForm() {
				if (!this.dateTimeValue) {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					});
					return false;
				}

				if (!this.dateTimeValue) {
					uni.showToast({
						title: '请选择时间',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.item || this.formData.item.trim() === '') {
					uni.showToast({
						title: '请输入事项',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.content || this.formData.content.trim() === '') {
					uni.showToast({
						title: '请输入服务内容',
						icon: 'none'
					});
					return false;
				}
				if (this.formData.content.length > 300) {
					uni.showToast({
						title: '服务内容不能超过300字',
						icon: 'none'
					});
					return false;
				}
				return true;
			},

			submitFollowUp() {
				if (!this.validateForm()) {
					return;
				}
				this.$api.post({
					url: '/uni/message/sendServiceReminder',
					data: {
						item: this.formData.item.trim(),
						time: this.formData.time,
						content: this.formData.content.trim()
					},
					loadingTip: '创建中...',
					success: (res) => {
						uni.showToast({
							title: '随访创建成功',
							icon: 'success'
						});
						this.formData = {
							item: '',
							time: '',
							content: ''
						};
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					},
					fail: (err) => {
						let errorMsg = '创建失败，请稍后重试';
						if (err.data && err.data.msg) {
							errorMsg = err.data.msg;
						} else if (err.msg) {
							errorMsg = err.msg;
						}

						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.form-item {
		border-bottom: 1px solid #F2F6F5;

		input {
			text-align: right;
			font-size: 28rpx;
		}

	}

	.input-css {
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
	}

	.color-333 {
		color: #333 !important;
	}

	.color-999 {
		color: #999 !important;
	}

	::v-deep .u-textarea {
		padding: 24rpx 40rpx 64rpx 40rpx !important;
		border-radius: 8rpx !important;
		font-size: 28rpx !important;
		min-height: 70px !important;
		border: 1px solid #DDDDDD;
		background-color: transparent !important;
	}

	::v-deep .u-textarea__count {
		bottom: 20rpx !important;
		right: 20rpx !important;
		background-color: transparent !important;
	}

	::v-deep .input-placeholder {
		font-size: 28rpx !important;
		font-weight: 400 !important;
		color: #999999 !important;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #0000000D;
		backdrop-filter: blur(4px);
	}
</style>
